// import { sendInfo } from "./room";
import { uint } from "tsrpc-proto";
export class Ball {
    ball: HTMLElement | undefined
    id: uint | undefined
    parentDom;
    client: any
    sendInfo: any
    bgColor: string
    constructor(parent: string | HTMLElement, id: uint, needEvent: boolean, client: any, sendInfo: any, bgColor: string) {
        this.client = client
        this.bgColor = bgColor
        this.id = id
        this.sendInfo = sendInfo
        if (typeof parent === "string") {
            this.parentDom = document.getElementById(parent);
        } else {
            this.parentDom = parent;
        }
        this.create();
        if (needEvent) this.addEvent();
    }
    create() {
        const { x, y } = this.randomPos();
        this.ball = document.createElement("div");
        this.ball.style.position = "absolute";
        this.ball.style.width = "100px";
        this.ball.style.height = "100px";
        this.ball.style.borderRadius = "50%";
        this.ball.style.left = x + "px";
        this.ball.style.top = y + "px";
        this.ball.style.backgroundColor = this.bgColor || `rgba(${this.random(
            0,
            255
        )},${this.random(0, 255)},${this.random(0, 255)})`;
        (this.parentDom as HTMLElement).append(this.ball);
    }
    addEvent() {

        let speed = 1;
        let upCode: null | number = null;
        const event_enum = {
            up: 38,
            down: 40,
            left: 37,
            right: 39,
        };
        // const _this = this;
        const f = (e: KeyboardEvent) => {
            e = e || window.event; //标准化事件处理
            const s = e.type + " " + e.keyCode; //获取键盘事件类型和按下的值
            if (speed < 50) {
                speed += 1;
            }
            if (upCode !== e.keyCode) {
                speed = 1;
            }
            upCode = e.keyCode;
            switch (e.keyCode) {
                case event_enum.up:
                    (this.ball as HTMLElement).style.top =
                        +(this.ball as HTMLElement).style.top.split("px")[0] + -speed + "px";
                    break;
                case event_enum.down:
                    (this.ball as HTMLElement).style.top =
                        +(this.ball as HTMLElement).style.top.split("px")[0] + speed + "px";
                    break;
                case event_enum.left:
                    (this.ball as HTMLElement).style.left =
                        +(this.ball as HTMLElement).style.left.split("px")[0] + -speed + "px";
                    break;
                case event_enum.right:
                    (this.ball as HTMLElement).style.left =
                        +(this.ball as HTMLElement).style.left.split("px")[0] + speed + "px";
                    break;
                default:
                    break;
            }

            this.sendInfo({
                id: this.id,
                x: +(this.ball as HTMLElement).style.left.split("px")[0],
                y: +(this.ball as HTMLElement).style.top.split("px")[0]
            })
            // sendInfo(_this.client, `{x:${+(_this.ball as HTMLElement).style.left.split("px")[0]},y:${+(_this.ball as HTMLElement).style.top.split("px")[0]}}`)
            // this.ball.value = s;
        }
        // document.onkeydown = f; //注册keydown事件处理函数
        // document.onkeyup = f; //注册keyup事件处理函数
        // document.onkeypress = f; //注册keypress事件处理函数
        let muserState = false
        const fn = (e: MouseEvent | TouchEvent) => {
            if (!muserState) return
            let x: number, y: number
            if (e instanceof MouseEvent) {
                const { clientX, clientY } = e;
                x = clientX
                y = clientY
            } else {
                const { clientX, clientY } = e.targetTouches[0];
                x = clientX
                y = clientY
            }
            (this.ball as HTMLElement).style.top = y - 50 + 'px';
            (this.ball as HTMLElement).style.left = x - 50 + 'px'
            this.sendInfo({
                id: this.id,
                x: x - 50,
                y: y - 50
            })
        }
        (this.ball as HTMLElement).onmousedown = (this.ball as HTMLElement).ontouchstart = () => muserState = true; //注册keydown事件处理函数
        (this.ball as HTMLElement).onmouseup = (this.ball as HTMLElement).ontouchend = () => muserState = false; //注册keyup事件处理函数
        (this.ball as HTMLElement).onmousemove = (this.ball as HTMLElement).ontouchmove = fn; //注册keypress事件处理函数
    }
    randomPos() {
        const x = this.random();
        const y = this.random();
        return { x, y };
    }
    random(startNum = 0, endNum = 100) {
        return ~~(Math.random() * (endNum - startNum) + startNum);
    }
    updatePos({ x, y }: { x: number, y: number }) {
        (this.ball as HTMLElement).style.top = y + 'px';
        (this.ball as HTMLElement).style.left = x + 'px'
    }
}
